<template>
    <div>
        <nav>
            <a :href="`#/xiang/${id}`" class="fa fa-angle-left"></a> 商品评论
            <span @click="isShow = !isShow">评论</span>
        </nav>
        <div class="content">
            <transition name="slide">
                <form  v-if="isShow" action="" class="isshow" ref="myform">
                    <input type="file" name='photo' accept="image/*" @change="getFile($event)">
                    <button @click.prevent="addping">提交</button>
                    <textarea name="content" id="" cols="36" rows="4"></textarea>
                </form>
            </transition>
            <div v-if="shop.length == 0" class="wei">
                改商品还没有评论
            </div>
            <div v-else class="ping">
                <ul>
                    <li v-for="item in shop">
                        <div class="auo">
                             <img :src="`http://localhost:2222/images/photos/${item.authorHead}`" alt="">
                            {{item.authorName}} <span>{{item.time | data}}</span>
                        </div>
                        <p>
                            {{item.content}}
                        </p>
                        <div class="img">
                            <img v-for="images in item.commentImages"
                             :src="`http://localhost:2222/images/photos/${images}`" alt="">
                        </div>
                    </li>
                </ul>
            </div>

        </div>

    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        data: function () {
            return {
                id:'',
                shop: '',
                isShow:false,
                files:[],
                commentImages:[]
            }
        },
           
         mounted: function () {
            var that = this;
            let id = this.$route.path.slice(9);
            axios.get(`los/xiang/${id}`).then(function (data) {
                that.id = data.data.message._id;
                that.shop = data.data.message.comment;
            }).catch(function (err) {
                console.log('获取失败')
            })
        },
        methods: {
            getFile(event) {
                console.log(event.target.files)
                for(var i = 0; i < event.target.files.length;i++){
                    this.commentImages.push(event.target.files[i]);
                    var url = URL.createObjectURL(event.target.files[i]);
                    this.files.push(url);
                }    
            },
            addping:function(){
                console.log(this.$refs.myform)
                let myform = this.$refs.myform;
                let formData = new FormData(myform);
                console.log(formData)
                let config = {
                    headers:{'Content-Type':'multipart/form-data'}
                };
                let id = this.$route.path.slice(9);
                console.log(id);
                axios.post(`los/addping/${id}`,formData,config)
                .then((resData) =>{
                   alert('评论成功');
                    location.reload();
                }).catch((err)=>{
                    console.log('cuowu')
                })
            }
        },
        filters: {
			data: function(input) {
				var d = new Date(input);
				var year = d.getFullYear();
				var month = d.getMonth() + 1;
				var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate();
				return year + '-' + month + '-' + day;
			}
		}
    }

</script>

<style scoped>
    nav {
        line-height: 45px;
        text-align: center;
        border-bottom: 1px solid #ddd;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background:#1E90FF;
        color: #fff;
    }

    nav>a {
        position: absolute;
        left: 20px;
        font-size: 30px;
        top: 6px;
        color: #fff;
    }
    nav span{
        position: absolute;
        right: 10px;
    }
      .content{
          margin-top: 45px;
      }
      .isshow{
          text-align: center;
          border: 1px solid #1E90FF;
          height: 140px;
          position: relative;
          background: rgba(173, 216 ,230,0.5);
          overflow: hidden;
      }
      .isshow  > input{
          margin: 10px 0;
      }
      .isshow  > button{
          background: #1E90FF;
          border:none;
          padding: 2px 10px;
          color: #fff;
          border-radius: 3px;
          
      }
        .slide-enter{
			height: 0 !important;
        }
        .slide-enter-active {
            transition: all 0.7s;
        }
        .slide-leave-active{ 
            transition: all 0.7s;
        }
        .slide-leave-to{
			height: 0px !important;
        }
    .wei{
        text-align: center;
        padding-top:200px;
        font-size: 26px;
        color: #666;
    }
    .ping li{
        padding:10px 15px;
        border-top: 10px solid #ddd;
    }
    .auo{
        overflow: hidden;
        font-size: 14px;
    }
    .auo > img{
        width: 30px;
        border-radius: 50%;
        border:1px solid #1E90FF;
        margin-right: 15px;
        display: block;
        float: left;
    }
    .ping li p{
        border: 1px solid #ccc;
        line-height: 20px;
        font-size: 14px;
        text-indent:2em;
        margin-top: 5px;
        padding: 0 5px;
    }
    .img > img{
        display:inline-block;
        width: 60px;
        height: 60px;
        overflow: hidden;
        margin: 5px 5px 0;
        border: 1px solid #ddd;
    }
</style>